<template>
  <el-container v-loading="loading">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" label-position="left" size="small">

      <div>
        <h4>存储方式</h4>
        <hr>
      </div>

      <el-form-item label="上传存储方式">
        <el-select v-model="ruleForm.storage_type" placeholder="请选择">
          <el-option
            v-for="item in fileUploadType"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div class="form-item-tip">
          <span>提示：系统默认使用选中的存储方式</span>
        </div>
      </el-form-item>

      <div v-if="ruleForm.storage_type == '2'">
        <div>
          <h4>七牛云配置</h4>
          <hr>
        </div>
        <el-form-item label="存储空间名称（Bucket）">
          <el-input v-model="ruleForm.qiniu.bucket"></el-input>
        </el-form-item>

        <el-form-item label="绑定域名（或测试域名）">
          <el-input v-model="ruleForm.qiniu.url"></el-input>
          <div class="form-item-tip">
            <span>提示：必须为完整路径，前面要加https或者http</span>
          </div>
        </el-form-item>

        <el-form-item label="AccessKey（AK）">
          <el-input v-model="ruleForm.qiniu.ak"></el-input>
        </el-form-item>

        <el-form-item label="SecretKey（SK）">
          <el-input v-model="ruleForm.qiniu.sk"></el-input>
        </el-form-item>
      </div>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
      </el-form-item>
    </el-form>

  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,  // 页面加载
        fileUploadType: [
          {
            label: '本地',
            value: '1'
          },
          {
            label: '七牛云',
            value: '2'
          }
        ],
        ruleForm: {
          "id": null,                //类型：Number  必有字段  备注：无
          "storage_type": '1',                //类型：Number  必有字段  备注：上传方式1本地2七牛
          "qiniu": {                //类型：Object  必有字段  备注：七牛云配置
            "bucket": "",                //类型：String  必有字段  备注：存储空间名称（Bucket）
            "url": "",                //类型：String  必有字段  备注：绑定域名（或测试域名）
            "ak": "",                //类型：String  必有字段  备注：AccessKey（AK）
            "sk": ""                //类型：String  必有字段  备注：SecretKey（SK）
          },
          "update_time": ""                //类型：String  必有字段  备注：无
        },
        rules: {},
      };
    },
    methods: {
      submitForm(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.api.updatetFileUploadConfig(_this.ruleForm).then(function (res) {
              if (res.code == 1) {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'success'
                });
              } else {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'warning'
                });
              }
            }).catch(function (error) {
              throw new Error(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },

    mounted: function () {
      let _this = this;
      this.api.getFileUploadConfig().then(function (res) {
        if (res.code == 1) {
          _this.ruleForm = res.data;
        }
        _this.loading = false;
      }).catch(function (res) {
        throw new Error(error);
      });
    },
  }
</script>

<style scoped>

  .el-container {
    display: block;
  }

  /* 表单 */
  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  /* 图片上传 */
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 178px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
